<template>
  <div class="app-container">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动名称" prop="daName">
              <el-input
                v-model="form.daName"
                placeholder="活动名称"
                :disabled="isView"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商家ID" prop="businessId">
              <el-input
                v-model="form.businessId"
                placeholder="商家ID"
                :disabled="isView"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动开始时间" prop="daStartTime">
              <el-date-picker
                v-model="form.daStartTime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="活动结束时间" prop="daEndTime">
              <el-date-picker
                v-model="form.daEndTime"
                type="datetime"
                placeholder="选择结束时间"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="活动描述" prop="daContent">
              <el-input
                v-model="form.daContent"
                type="textarea"
                :rows="4"
                placeholder="请输入活动描述"
                :disabled="isView"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="box-card" style="margin-top: 20px;">
        <template #header>
          <div class="card-header">
            <span>优惠设置</span>
          </div>
        </template>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="优惠门槛" prop="daDoorsill">
              <el-input
                v-model="form.daDoorsill"
                placeholder="优惠门槛"
                :disabled="isView"
                clearable
              >
                <template #append>元</template>
              </el-input>
              <div class="form-tip">消费达到当前金额可以参与优惠</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优惠金额" prop="daMoney">
              <el-input
                v-model="form.daMoney"
                placeholder="优惠金额"
                :disabled="isView"
                clearable
              >
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="活动范围" prop="daRange">
              <el-radio-group v-model="form.daRange" :disabled="isView">
                <el-radio :label="0">全品类</el-radio>
                <el-radio :label="1">指定商品</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-form-item>
        <el-button type="primary" @click="submitForm" v-if="!isView">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup name="DoorsillActivityForm">
import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { addDoorsillActivity, updateDoorsillActivity, getDoorsillActivity } from "@/api/csmshop/doorsillActivity";

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const { id, type } = route.query;
const isView = ref(type === 'view');

const data = reactive({
  form: {
    daId: undefined,
    businessId: undefined,
    daName: undefined,
    daStartTime: undefined,
    daEndTime: undefined,
    daStatus: 0,
    daContent: undefined,
    daDoorsill: undefined,
    daMoney: undefined,
    daRange: 0
  },
  rules: {
    businessId: [
      { required: true, message: "商家ID不能为空", trigger: "blur" }
    ],
    daName: [
      { required: true, message: "活动名称不能为空", trigger: "blur" }
    ],
    daStartTime: [
      { required: true, message: "开始时间不能为空", trigger: "blur" }
    ],
    daEndTime: [
      { required: true, message: "结束时间不能为空", trigger: "blur" }
    ],
    daDoorsill: [
      { required: true, message: "优惠门槛不能为空", trigger: "blur" }
    ],
    daMoney: [
      { required: true, message: "优惠金额不能为空", trigger: "blur" }
    ]
  }
});

const { form, rules } = toRefs(data);

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      if (form.value.daId != null) {
        updateDoorsillActivity(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          router.push({ path: '/marketing/csmshop/doorsillActivity' });
        });
      } else {
        addDoorsillActivity(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          router.push({ path: '/marketing/csmshop/doorsillActivity' });
        });
      }
    }
  });
}

/** 取消按钮 */
function cancel() {
  router.push({ path: '/marketing/csmshop/doorsillActivity' });
}

/** 初始化 */
onMounted(() => {
  console.log('Form mounted, route query:', route.query);
  if (id) {
    getDoorsillActivity(id).then(response => {
      console.log('获取到的数据:', response.data);
      form.value = response.data;
      if (type === 'view') {
        isView.value = true;
      }
    }).catch(error => {
      console.error('获取数据失败:', error);
    });
  }
});
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style>
